<template>
    <div>
        <el-card>
            <h1>子组件</h1>
            <el-form-item label="父组件的值">
                <el-input v-model="msg" />
            </el-form-item>
            <el-form-item label="子组件的值">
                <el-input v-model="msgFromChild" />
            </el-form-item>
            <hr>

            <el-button @click="$emit('childClick', '来自子组件的值')">子组件的点击</el-button>
            <el-button @click="">发送Child页面的消息</el-button>
        </el-card>
    </div>
</template>

<script>
import { ref } from "vue"

export default {
    name: 'Event',
    props: {
        msg: String
    },
    setup() {
        const msg = ref("我是父组件的值")
        const msgFromChild = ref("我是子组件的值")
        const childClick = function(){
            msgFromChild.value = msg
        }
        const sendMsg = function(){
            bus.emit('getMsg', msgFromChild)
        }

        return {
            msg,
            msgFromChild,
            childClick,
            sendMsg
        }
    }
}
</script>

<style></style>